<template>
    <div>
        <button @click="show = !show">切换</button>
        <transition enter-active-class="animate__animated animate__wobble"
        leave-active-class="animate__animated animate__bounceInLeft"
        appear
        mode="out-in"
        >
            <div class="box" v-show="show">123</div>
        </transition>
<hr>
<button @click="isEditing= !isEditing">切换保存和编辑</button>
        <transition name="fade" mode="out-in">
        <!-- <button v-if="isEditing" key="save">保存</button>
        <button v-else="" key="edit">编辑</button> -->
        <button :key="isEditing">{{isEditing ? '保存' : '编辑'  }}</button>
        </transition>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const isEditing = ref(true)
</script>

<style scoped>
.box {
    width: 200px;
    height: 100px;
    background-color: rgb(153, 127, 255);
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>